// 
// 雪碧图函数
// 

// px转rem
$baseFont: 10;
@function parseInt($n){
    @return $n / ($n * 0 +1);
}
@function rem($px,$scale:1){
    $list: ();
    @each $item in $px{
        @if $item == 0 or $item == auto{
            $list: append($list, $item);
        }
        @else{
            $unit: unit($item);
            $val: parseInt($item);

            @if $unit == px {
                $list: append($list, ($val / $baseFont /2 * $scale + rem))
            }

            @if $unit == rem {
                $list: append($list, $item * $scale) ;
            }
        }
    }
    @return $list;
}

@function px2($px,$scale:1){
    $list:();
    @each $item in $px{
        @if $item == 0 or $item == auto{
            $list: append($list, $item);
        }
        @else{
            $unit: unit($item);
            $val: parseInt($item);

            $list: append($list, ($val/2* $scale  + px))
        }
    }
    @return $list;
}

// 雪碧图函数
// 公共样式 - 参数参照下面的最终函数
@mixin sp-public($sp,$unit:rem,$width:null,$height:null,$is-align:false,$scale:1,$init:false){
    display:inline-block;
    background-image:sprite-url($sp);
    background-repeat:no-repeat;
    @if($init!=false){
        background-position:rem(sprite-position($sp,$init),$scale:$scale);
    }
    // 默认rem
    @if($unit==rem){
        background-size:rem(image-width(sprite-path($sp)),$scale:$scale) rem(image-height(sprite-path($sp)),$scale:$scale);
    }
    // 可选px
    @else{
        background-size:image-width(sprite-path($sp))/2*$scale auto;
    }
    @if($width!=null){
        width:$width*$scale;
    }
    @if($height!=null){
        height:$height*$scale;
        @if($is-align==true){
            line-height:$height*$scale;
        }
    }
}

@mixin single-class($sp,$sp-name,$width,$height,$unit,$is-align,$scale){

    // 默认rem
    @if($unit==rem){

        @if($width==null){
            width:rem(image-width(sprite-file($sp,$sp-name)),$scale:$scale);
        }
        @if($height==null){
            height:rem(image-height(sprite-file($sp,$sp-name)),$scale:$scale);
            @if($is-align==true){
                line-height:rem(image-height(sprite-file($sp,$sp-name)),$scale:$scale);
            }
        }
        background-position:rem(sprite-position($sp,$sp-name),$scale:$scale);
    }

    @else{

        @if($width==null){
            width:image-width(sprite-file($sp,$sp-name))/2*$scale;
        }
        @if($height==null){
            height:image-height(sprite-file($sp,$sp-name))/2*$scale;
            @if($is-align==true){
                line-height:image-height(sprite-file($sp,$sp-name))/2*$scale;
            }
        }
        background-position:px2(sprite-position($sp,$sp-name),$scale:$scale);
    }
}

// 雪碧图最终调用函数
// *sp: 设置ID，整站唯一的，不可重复
// *sp-url: 图片路径
// *base-class: 样式前缀
// spacing: 图片间距，默认为4px
// layout: 拼合方式，默认smart，还可选vertical,horizontal,diagonal
// unit: 单位，可选rem和px
// width/height: 如果整个文件夹的图片都是统一尺寸，建议设置一下，会写入公共的样式里，不会分开单独写
// public-class: 公共样式
// is-align: 默认false,可选true,是否需要做图标对齐(通过设置line-height和设置:before的方法)
// scale: 图标缩放，会自动按比较改变background-size及position的值
// init: 初始化图标位置，默认图片名称
@mixin sp-output($sp,$sp-url,$base-class,$spacing:4px,$layout:smart,$unit:rem,$width:null,$height:null,$public-class:null,$is-align:false,$scale:1,$init:false){
    $sp-title:$sp;
    $sp:sprite-map($sp-url,$spacing:$spacing,$layout:$layout);
    // 公共的样式
    %#{$sp-title}-public{
        @include sp-public($sp,$unit,$width,$height,$is-align,$scale,$init);
        // 如果需要图标与文字对齐
        @if($is-align==true){
            &:after{content:".";color:transparent;}
        }
    }
    // 如果需要定义一个单独的公共样式
    @if($public-class!=null){
        .#{$public-class}{
            @include sp-public($sp,$unit,$width,$height,$is-align,$scale,$init);
        }
    }
    @each $sp-name in sprite-names($sp){
        @if($public-class==null){
            .#{$base-class}-#{$sp-name}{
                @extend %#{$sp-title}-public;
                @include single-class($sp,$sp-name,$width,$height,$unit,$is-align,$scale)
            } 
        }
        @else{
            .#{$public-class}.#{$base-class}-#{$sp-name}{
                @include single-class($sp,$sp-name,$width,$height,$unit,$is-align,$scale)
            } 
        }
    }
}

// mask雪碧图函数
@mixin mask-sp-public($sp,$color,$unit:rem,$width:null,$height:null,$is-align:false,$scale:1,$init:false){
    display:inline-block;
    background-color:$color;
    -webkit-mask-image:sprite-url($sp);
    -webkit-mask-repeat:no-repeat;
    @if($init!=false){
        -webkit-mask-position:rem(sprite-position($sp,$init),$scale:$scale);
    }
    // 默认rem
    @if($unit==rem){
        -webkit-mask-size:rem(image-width(sprite-path($sp)),$scale:$scale) rem(image-height(sprite-path($sp)),$scale:$scale);
    }
    // 可选px
    @else{
        -webkit-mask-size:image-width(sprite-path($sp))/2*$scale auto;
    }
    @if($width!=null){
        width:$width*$scale;
    }
    @if($height!=null){
        height:$height*$scale;
        @if($is-align==true){
            line-height:$height*$scale;
        }
    }
}
@mixin mask-sp-output($sp,$color,$sp-url,$base-class,$spacing:4px,$layout:smart,$unit:rem,$width:null,$height:null,$public-class:null,$is-align:false,$scale:1,$init:false){
    $sp-title:$sp;
    $sp:sprite-map($sp-url,$spacing:$spacing,$layout:$layout);
    // 公共的样式
    %#{$sp-title}-public{
        @include mask-sp-public($sp,$color,$unit,$width,$height,$is-align,$scale,$init);
        // 如果需要图标与文字对齐
        @if($is-align==true){
            &:after{content:".";color:transparent;}
        }
    }
    // 如果需要定义一个单独的公共样式
    @if($public-class!=null){
        .#{$public-class}{@include mask-sp-public($sp,$color,$unit,$width,$height,$is-align,$scale,$init);}
    }
    @each $sp-name in sprite-names($sp){
        .#{$base-class}-#{$sp-name}{
            @if($public-class==null){
                @extend %#{$sp-title}-public;
            }
            // 默认rem
            @if($unit==rem){

                @if($width==null){
                    width:rem(image-width(sprite-file($sp,#{$sp-name})),$scale:$scale);
                }
                @if($height==null){
                    height:rem(image-height(sprite-file($sp,#{$sp-name})),$scale:$scale);
                    @if($is-align==true){
                        line-height:rem(image-height(sprite-file($sp,#{$sp-name})),$scale:$scale);
                    }
                }
                -webkit-mask-position:rem(sprite-position($sp,#{$sp-name}),$scale:$scale);
            }

            @else{

                @if($width==null){
                    width:image-width(sprite-file($sp,#{$sp-name}))/2*$scale;
                }
                @if($height==null){
                    height:image-height(sprite-file($sp,#{$sp-name}))/2*$scale;
                    @if($is-align==true){
                        line-height:image-height(sprite-file($sp,#{$sp-name}))/2*$scale;
                    }
                }
                -webkit-mask-position:px2(sprite-position($sp,#{$sp-name}),$scale:$scale);
            }
        }
    } 
}

// 非雪碧图，遍历函数
@mixin single-output($base-url,$base-class:null,$width:null,$height:null,$public-class:null,$is-align:false,$init:false,$sort:png){
    $url-pre:"/mb/v4/img/";
    $sp:sprite-map($base-url+"*.png");
    .#{$public-class}{display: inline-block;width: $width;height: $height;background-repeat: no-repeat;background-position:center center;background-size: 100% auto;background-image: url($url-pre+$base-url+$init+"."+$sort);}
    @each $sp-name in sprite-names($sp){
        @if($sp-name!=$init){
            @if($base-class==null){
                .#{$public-class}.#{$sp-name}{
                    background-image:url($url-pre+$base-url+$sp-name+"."+$sort)
                } 
            }
            @else{
                .#{$public-class}.#{$base-class}-#{$sp-name}{
                    background-image:url($url-pre+$base-url+$sp-name+"."+$sort)
                } 

            }
        }
    }
}


